:host {
  padding: 0 0.5rem;
  background-color: #fff;
  width: 100%;
}
.card-container {
  display: grid;
  grid-template-columns: 10rem 1fr;
  grid-template-rows: 3rem 1fr 2rem 2rem;
  grid-gap: 5px;
  grid-template-areas:
    'image title'
    'image .'
    'image tags'
    'image price';
  place-content: stretch;
  place-items: stretch;
  padding: 0 5px;
  .product-img{
    grid-area: image;
  object-fit: contain;
  width: 10rem;
  height: 10rem;
  padding: .5rem 0;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .product-title{
    grid-area: title;
    padding: .6rem 0;
  }
  .product-tags{
    grid-area: tags;
    span {
      margin-bottom: 0.6rem;
    }

  }
  .product-price{
    grid-area: price;
    padding-bottom: .5rem;
    display: flex;
    justify-content: space-between;
    flex-wrap: nowrap;
    .avatar {
      display: flex;
      flex-wrap: nowrap;
      img {
        display: inline-block;
        position: relative;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        border: 1px solid #999999;
      }
    }

  }
}
